import { Image } from "expo-image";
import { useState } from "react";
import { FlatList, ImageSourcePropType, Platform, Pressable, StyleSheet } from "react-native";

const [emojiList] = useState([
    require("../assets/images/emoji1.png"),
    require("../assets/images/emoji2.png"),
    require("../assets/images/emoji3.png"),
    require("../assets/images/emoji4.png"),
    require("../assets/images/emoji5.png"),
    require("../assets/images/emoji6.png"),
]);

type Props = {
    onSelect: (image: ImageSourcePropType) => void, // 这段含义: 接收一个参数类型为ImageSourcePropType的函数
    onCloseModal: () => void
}
export default function EmojiList({ onSelect, onCloseModal }: Props) {
    return (
        <FlatList
            horizontal // 水平展示
            showsHorizontalScrollIndicator={Platform.OS == 'web'} // web下出现滚动条
            data={emojiList}
            contentContainerStyle={styels.listContainer}
            renderItem={({ item, index }) => ( // 这里箭头右边用的是圆括号, 代表的这个函数返回的是一段jsx模板, 是常规函数省略returen <View>的用法
                <Pressable
                    onPress={() => {
                        onSelect(item)
                        onCloseModal
                    }}
                >
                    <Image source={item} key={index} style={styels.image} />
                </Pressable>
            )}
        />
    );
}

const styels = StyleSheet.create({
    listContainer: {
        borderTopRightRadius: 10,
        borderTopLeftRadius: 10,
        paddingHorizontal: 20,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    image: {
        width: 100,
        height: 100,
        marginRight: 20,
    },
})